<template>
  <div>
  <div class="iot_TheCart" v-if="Goods[14]">
    <div class="iot_Sum">
      {{'购物车总价：'}}
      <span>{{ '￥'+ PriceSum}}</span>
      <a href="" class="iot_Delete" @click.prevent="OpenDeleteGoods">管理</a>
      <a href="" class="iot_buy" style="background-color: #f56c6c;" @click.prevent="DeleteGoods('all')" v-show="DeleteFlog">清空</a>
      <a href="" class="iot_buy" @click.prevent="BuyGoods" v-show="!DeleteFlog">全部购买</a>
    </div>
    <div class="iot_CartGoods" v-for="(item,index) in Goods[14]" :key="item.id">
      <img :src="item.img" alt="">
      <div>
        <p>{{'已选：'+item.options}}</p>
        <div class="iot_Downprice">
        <p>{{ '数量：'+item.number}}</p>
        <p>{{ '总价：￥'+ item.price }}</p>
        </div>
      </div>
    <a href="" class="iot_buy" style="background-color: #f56c6c;" @click.prevent="DeleteGoods(index)" v-show="DeleteFlog">删除</a>
    <a href="" class="iot_buy" @click.prevent="BuyGoods" v-show="!DeleteFlog">立即购买</a>
    </div>
  </div>
  <div class="iot_CartTip" v-show="(Goods[14].length == 0)"><img src="../assets/icons/logo/blank_cart.png" alt=""></div>
</div>
</template>

<script>
import { computed, inject,ref } from 'vue';
import { h } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup(){
    //每次操作后保存
    const RegisterImformation = inject('RegisterImformation')
    const LoginIndex = inject('LoginIndex')
    function InGoods(){
      RegisterImformation[LoginIndex.value].cart = Goods[14]
      localStorage.setItem('Register',JSON.stringify(RegisterImformation))
    }
    const Goods = inject('Goods');
    function BuyGoods(){
          ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '购买功能暂没开通'),
            ]),
            })
        }
      let PriceSum = computed(()=>{
        let price = 0
        for(let i = 0; i < Goods[14].length;i++){
          price += Goods[14][i].price;
      }
      return price;
      })
      //删除功能
      let DeleteFlog = ref(false)
      function OpenDeleteGoods(){
        DeleteFlog.value = !DeleteFlog.value;
      }
      function DeleteGoods(index){
        if(index == 'all'){
          if(Goods[14].length == 0){
            ElMessage({
              message: h('p', { style: 'line-height: 1; font-size: 14px; color:#f56c6c' }, [
                h('i', null, '购物车已经是空的了'),
              ]),
              })
          }else{
            Goods[14] = [];
            InGoods()
            ElMessage({
                message: h('p', { style: 'line-height: 1; font-size: 14px; color:#f56c6c' }, [
                  h('i', null, '已清空'),
                ]),
                })
          }
        }else{
          Goods[14].splice(index,1);
          InGoods()
          ElMessage({
              message: h('p', { style: 'line-height: 1; font-size: 14px; color:#f56c6c' }, [
                h('i', null, '已删除'),
              ]),
              })
        }
      }
    return {Goods,BuyGoods,PriceSum,OpenDeleteGoods,DeleteFlog,DeleteGoods}
  }
}
</script>

<style scoped>
.iot_TheCart{
  position: relative;
  padding-top: 50px;
}
.iot_CartTip{
  margin: 50px auto;
}
.iot_CartTip img {
  width: 300px;
  height: 210px;
}
.iot_CartGoods{
  position: relative;
  width: 844.4px;
  margin: 10px 10px;
  border-radius: 5px;
  height: 70px;
  padding: 10px;
  display: flex;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.iot_CartGoods img{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.iot_CartGoods p{
  margin: 0;
  text-align: left;
}
.iot_Downprice{
  display: flex;
}
.iot_Downprice p:nth-child(2){
  margin-left:40px ;
}
.iot_buy{
  width: 120px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 40px;
  background-color:#27ba9b;
}
.iot_buy:hover{
  background-color: #23a387;
}
.iot_Sum{
  width: 864.4px;
  top: 0;
  position: absolute;
  height: 50px;
  background-color:#ffffff;
  line-height: 50px;
}
.iot_Sum .iot_buy{
  top: 5px;
}
.iot_Sum span{
  font-size: 20px;
  color: #ff3a3a;
}
.iot_Delete{
  color: #999999;
  position: absolute;
  right: 180px;
}
</style>